<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {allDataStore} from "../../../stores/data.ts";
import * as echarts from "echarts";
import myAxios from "../../../plugins/myAxios.ts";
import {Message} from "@arco-design/web-vue";

const data = allDataStore()

const showData = reactive(data.showData)
const chartAll = ref(null)
const currentChart = ref(null)
let myChartLeft;
let myChartRight;

const initCurrentChart = (name) => {
  myChartRight = echarts.init(currentChart.value);
  const medicineNum = showData.medicineNum;
  const prescriptionNum = showData.prescriptionNum;
  const postNum = showData.postNum;
  const userNum = showData.userNum;
  const optionTCM = {
    title: {
      text: name + '趋势图',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: ['二月', '三月', '四月', '五月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0, medicineNum - 300, medicineNum - 100, medicineNum],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#5be55e'
        }
      }
    ]
  };
  const optionPre = {
    title: {
      text: name + '趋势图',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: ['二月', '三月', '四月', '五月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0, medicineNum - 100, prescriptionNum - 60, prescriptionNum],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#37afe1'
        }
      }
    ]
  };
  const optionPost = {
    title: {
      text: name + '趋势图',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: ['二月', '三月', '四月', '五月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0, 0, postNum-2, postNum],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#ee293f'
        }
      }
    ]
  };
  const optionUser = {
    title: {
      text: name + '趋势图',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: ['二月', '三月', '四月', '五月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [userNum, userNum, userNum, userNum],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#1f64ce'
        }
      }
    ]
  };
  let option;
  if (name === '药材种类') {
    option = optionTCM;
  } else if(name === '药方数量') {
    option = optionPre;
  } else if (name === '帖子总量'){
    option = optionPost;
  } else if (name === '用户数量') {
    option = optionUser;
  } else {
    Message.error('数据错误')
  }
  option && myChartRight.setOption(option);
}

const initAllChart = () => {
  myChartLeft = echarts.init(chartAll.value);
  // 绘制图表
  const option = {
    title: {
      text: '数据总览',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: ['药材种类', '药方数量', '帖子总量', '用户数量']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [showData.medicineNum, showData.prescriptionNum, showData.postNum, showData.userNum],
        type: 'bar',
        itemStyle: {
          color: '#036A07'
        }
      }
    ]
  };
  option && myChartLeft.setOption(option);
  myChartLeft.on('click', function (params) {
    initCurrentChart(params.name)
  });
}
onMounted(() => {
  setTimeout(() => {
    initAllChart()
  },1000)
})
</script>
<template>
  <div id="admin-home">
    <a-divider>
      数据总览
    </a-divider>
    <div class="top">
      <div class="box">
        <a-statistic title="药材种类" :value="showData.medicineNum" :value-from="0" animation>
          <template #prefix>
            <icon-arrow-rise/>
          </template>
          <template #suffix>类</template>
        </a-statistic>
      </div>
      <div class="box">
        <a-statistic title="药方数量" :value="showData.prescriptionNum" :value-from="0" animation>
          <template #prefix>
            <icon-arrow-rise/>
          </template>
          <template #suffix>种</template>
        </a-statistic>
      </div>
      <div class="box">
        <a-statistic title="帖子总量" :value="showData.postNum" :value-from="0" animation>
          <template #prefix>
            <icon-arrow-rise/>
          </template>
          <template #suffix>个</template>
        </a-statistic>
      </div>
      <div class="box">
        <a-statistic title="用户数量" :value="showData.userNum" :value-from="0" animation>
          <template #prefix>
            <icon-arrow-rise/>
          </template>
          <template #suffix>个</template>
        </a-statistic>
      </div>
    </div>
    <a-divider>
      图形
    </a-divider>
    <div class="chart">
      <div ref="chartAll" id="chartAll"></div>
      <div ref="currentChart" id="currentChart"></div>
    </div>
  </div>
</template>

<style scoped>
#admin-home {
  height: 88vh;
}

:deep(.arco-divider-text-center) {
  background-color: #F2F3F5;
}

.top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.box {
  width: 22%;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin: 0 20px;
}

.box:hover {
  box-shadow: 0 0 10px #ccc;
  cursor: pointer;
  background-color: lightskyblue;
}

.chart {
  height: 100%;
  display: flex;
  justify-content: space-around;
}

#chartAll {
  height: 50%;
  width: 40%;
}

#currentChart {
  height: 50%;
  width: 40%;
}
</style>